<template>
	<view class="map">
		<block v-if="hasLocationPermit===1">
			<view class="hasPermit">
				<!-- 搜索框 -->
				<view class="search">
					<u-search :value="locationInfo.name" @click="searchMap" :showAction="false" disabled></u-search>
				</view>
				<!-- 地图组件 -->
				<view class="mapBox">
					<map id="map" :latitude="locationInfo.latitude" :longitude="locationInfo.longitude"
						:show-location="true" :enable-3D="true" :enable-rotate="true"
						:markers="[{latitude:locationInfo.latitude,longitude:locationInfo.longitude,id:0,iconPath:'../../static/images/icon/pos.png',width:50,height:50}]"></map>
				</view>
				<!-- 门店信息 -->
				<view class="shopInfo">
					<view class="shopCard" v-for="shop in shopList" :key="shop.id">
						<u-row>
							<u-col span="8">
								<!-- 店铺信息 -->
								<view class="shop-info">
									<!-- 店名 -->
									<view class="shop-info__name">
										<i class="iconfont icon-youhuiquan"></i>
										<text>{{shop.name}}</text>
										<u-tag text="营业中" plain size="mini" type="success"
											v-if="shop.status===1"></u-tag>
										<u-tag text="休息中" plain size="mini" v-else></u-tag>
									</view>
									<!-- 距离 -->
									<view class="shop-info__dist">
										<text>距离您 {{shop.distance}}km</text>
									</view>
									<!-- 位置 -->
									<view class="shop-info__pos">
										<text>{{shop.address}}</text>
									</view>
									<!-- 营业时间 -->
									<view class="shop-info__time">
										<text>营业时间：09:00-23:00</text>
									</view>
								</view>
							</u-col>
							<!-- 按钮 -->
							<u-col span="4">
								<view class="shop-button">
									<!-- 联系 -->
									<view class="shop-button__contact">
										<view class="shop-button__phone">
											<i class="iconfont icon-dianhua-xianxingyuankuang"></i>
											<text>电话</text>
										</view>
										<view class="shop-button__navigate">
											<i class="iconfont icon-zhinanzhidao-xianxing"></i>
											<text>导航</text>
										</view>
									</view>
									<!-- 去下单 -->
									<view class="shop-button__toOrder">
										<u-button text="去下单" :hairline="false" color="#ff516b"
											:customStyle="{height: '60rpx'}" @click="toPurchase(shop)"
											v-if="shop.status===1"></u-button>
										<u-button text="去下单" :hairline="false" color="#c3c3c3"
											:customStyle="{height: '60rpx'}" disabled v-else></u-button>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</block>
		<!-- 没有定位权限 -->
		<block v-if="hasLocationPermit===0">
			<view class="needPermit">
				<i class="iconfont icon-dingwei"></i>
				<view class="text">定位授权如未获取您的位置信息</view>
				<view class="text">请检查是否开启定位授权</view>
				<view class="needPermit-button">
					<u-button text="定位授权" @click="pullLocationPermit"
						:customStyle="{backgroundColor: '#ff516b',color: '#fff',borderRadius: '20px',marginTop: '20rpx'}"></u-button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定位权限是否已获取
				hasLocationPermit: -1, // -1权限请求中，0无权限，1取得权限
				// 位置信息(地图组件配置项)
				locationInfo: {
					name: '',
					address: '',
					latitude: 0, // 纬度
					longitude: 0, // 精度
				},
				// 门店信息
				shopList: [{
						id: 0,
						name: '瑞幸咖啡',
						distance: 2.4,
						address: '广东省广州市天河区广州塔路',
						status: 0, // 休息中
					},
					{
						id: 1,
						name: '橘猫の茶',
						distance: 3.4,
						address: '广东省广州市天河区河东路',
						status: 1, // 营业中
					},
					{
						id: 2,
						name: '冰芬夏季',
						distance: 12,
						address: '广东省广州市天河区河西路',
						status: 0
					},
					{
						id: 3,
						name: '斯哒拔克斯',
						distance: 13.2,
						address: '广东省广州市天河区河南路',
						status: 1
					}
				],
			}
		},
		onLoad() {
			// 获取用户位置信息
			this.getUserAddressInfo();
		},
		methods: {
			// 拉取地址选择页
			searchMap() {
				// 打开地图选择位置
				uni.chooseLocation({
					success: (info) => {
						// console.log(info);
						this.locationInfo.name = info.name;
						this.locationInfo.address = info.address;
						this.locationInfo.latitude = info.latitude;
						this.locationInfo.longitude = info.longitude;
					}
				});
			},
			// 拉取位置权限授权页
			pullLocationPermit() {
				// 跳转到授权页
				uni.openSetting({
					success: (permi) => {
						// console.log(permi);
						if (!permi.authSetting['scope.userLocation'])
							return;
						this.getUserAddressInfo();
					}
				});
			},
			// 获取用户位置信息
			getUserAddressInfo() {
				uni.getLocation({
					success: (info) => {
						// 获取权限成功
						// console.log('ok', info);
						this.hasLocationPermit = 1;
						this.locationInfo.latitude = info.latitude;
						this.locationInfo.longitude = info.longitude;
					},
					fail: () => {
						this.hasLocationPermit = 0;
						// 获取权限失败
						uni.showModal({
							content: "页面需要获取您的位置权限以获取周边店铺信息",
							success: (res) => {
								if (res.cancel || !res.confirm) return;
								// console.log(res);
								this.pullLocationPermit();
							}
						});
					}
				});
			},
			// 携带商铺信息跳转到下单页
			toPurchase(shop) {
				// console.log(shop);
				uni.setStorageSync('shopInfo', JSON.stringify(shop));
				this.$Router.pushTab('/purchase');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		@include page-bgc();

		.hasPermit {
			display: flex;
			flex-direction: column;
			height: 100vh;

			// 搜索框
			.search {
				padding: 20rpx;
				background-color: #fff;
			}

			// 地图组件
			.mapBox {
				margin-bottom: 20rpx;

				#map {
					width: 100%;
					height: 36vh;
				}
			}

			// 门店卡片
			.shopInfo {
				flex: 1;
				overflow: auto;

				.shopCard {
					background-color: #fff;
					margin: 0 20rpx 20rpx;
					padding: 20rpx;
					border-radius: 16px;

					// 店铺信息
					.shop-info {
						border-right: 1px solid #f0f0f0;
						padding: 10rpx 10rpx 10rpx 0;

						// 店名
						.shop-info__name {
							display: flex;
							align-items: center;

							>i {
								font-size: 50rpx;
								color: $theme-color;
								margin-right: 10px;
							}

							>text {
								font-size: 32rpx;
								color: #000;
								font-weight: 700;
								margin-right: 6px;
							}
						}

						// 距离
						.shop-info__dist {
							margin-top: 4rpx;

							text {
								font-size: 26rpx;
							}
						}

						// 位置
						.shop-info__pos {
							font-size: 28rpx;
							color: #333;
							margin: 12rpx 0;
							@include textOverflow();
						}

						// 营业时间
						.shop-info__time {
							font-size: 26rpx;
							color: #999;
						}
					}

					// 按钮
					.shop-button {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						padding-left: 40rpx;

						// 联系
						.shop-button__contact {
							width: 100%;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 36rpx;

							.shop-button__phone,
							.shop-button__navigate {
								display: flex;
								flex-direction: column;
								align-items: center;

								i.iconfont {
									font-size: 54rpx;
									color: #333;
								}

								text {
									font-size: 24rpx;
									margin-top: 8rpx;
								}
							}
						}
					}
				}
			}

		}

		// 没有定位权限时展示
		.needPermit {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20vh;

			i {
				font-size: 160rpx;
				color: $theme-color;
				margin-bottom: 20rpx;
			}

			.text {
				color: #999;
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			.needPermit-button {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 140rpx;

			}
		}
	}
</style>